<template>
	<view>
		<u-swiper :list="slides" name="img_url" height="320"></u-swiper>
		<view class="u-text-center u-m-t-20">
			<u-tabs :list="sortlist" bar-width="100" item-width="155" :current="currentSort" @change="changeSort">
			</u-tabs>
		</view>
		<u-row gutter="16"  class="u-skeleton">
			<u-col span="6" v-for="(goods,id) in goodsList ">
				<goods-card :goods="goods"></goods-card>
			</u-col>
		</u-row>
		<!-- //骨架屏 -->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sortlist: [{
						name: '默认'
					},
					{
						name: '销量'
					},
					{
						name: '推荐'
					},
					{
						name: '最新'
					},
				],
				currentSort: 0,
				goodsList: [{},{},{},{}],
				slides: [],
				page: 1,
				loading: false
			}

		},
		onLoad() {
			this.getData()
		},
		methods: {
			changeSort(index) {
				console.log(index)
				this.currentSort = index
				this.goodsList = [{},{},{},{}]
				this.page = 1
				this.getData()
			},
			// 获取数据
			async getData() {
				this.loading = true
				const params = {
					page: this.page,

				}
				if (this.currentSort == 1) params.sales = 1
				if (this.currentSort == 2) params.rencomend = 1
				if (this.currentSort == 3) params.new = 1
				const res = await this.$u.api.index(params)
				this.slides = res.slides
				this.loading = false
				this.goodsList =(this.goodsList.pop().title)? [...this.goodsList, ...res.goods.data]:res.goods.data
			},
		},

		//页面滚动到底部的事件
		onReachBottom() {
			// 重新请求
			this.page += 1
			this.getData()
		}
	}
</script>

<style lang="scss" scoped>

</style>
